<template>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="文章名称" prop="articleName">
            <el-input v-model="form.articleName" placeholder="请输入文章名称" />
        </el-form-item>

        <el-form-item label="文章简介" prop="articleIntro">
            <el-input v-model="form.articleIntro" type="textarea" :rows="4" placeholder="请输入文章简介" />
        </el-form-item>

        <el-form-item label="咨询师ID" prop="consultantId">
            <el-input-number v-model="form.consultantId" :min="1" placeholder="请输入咨询师ID" />
        </el-form-item>

        <el-form-item label="图片链接" prop="listImage">
            <el-input v-model="form.listImage" placeholder="请输入图片链接" />
        </el-form-item>

        <el-form-item label="详情内容" prop="detailContent">
            <el-input v-model="form.detailContent" type="textarea" :rows="4" placeholder="请输入详情内容" />
        </el-form-item>

        <el-form-item label="阅读量" prop="readCount">
            <el-input-number v-model="form.readCount" :min="1" placeholder="请输入阅读量" />
        </el-form-item>

        <el-form-item label="收藏量" prop="collectCount">
            <el-input-number v-model="form.collectCount" :min="1" placeholder="请输入收藏量" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

export default {
    setup() {
        // 表单数据
        const form = ref({
            articleName: '',
            articleIntro: '',
            consultantId: null,
            listImage: '',
            detailContent:'',
            readCount:null,
            collectCount:''

        });

        // 表单验证规则
        const rules = {
            articleName: [
                { required: true, message: '请输入文章名称', trigger: 'blur' }
            ],
            articleIntro: [
                { required: true, message: '请输入文章简介', trigger: 'blur' }
            ],
            consultantId: [
                { required: true, message: '请输入咨询师ID', trigger: 'blur' }
            ],
            listImage: [
                { required: true, message: '请输入图片链接', trigger: 'blur' }
            ],
            detailContent:[
                { required: true, message: '请输入详情内容', trigger: 'blur' }
            ],
            readCount:[
                { required: true, message: '请输入阅读量', trigger: 'blur' }
            ],
            collectCount:[
                { required: true, message: '请输入收藏量', trigger: 'blur' }
            ]
        };

        const formRef = ref(null);

        // 提交表单
        const submitForm = () => {
            formRef.value.validate(async (valid) => {
                if (valid) {
                    await axios.post("/api/article/add",form.value)
                    ElMessage.success('提交成功！');
                    // 调用后端 API 或其他处理逻辑
                    console.log('表单数据：', form.value);
                } else {
                    ElMessage.error('请检查输入内容');
                }
            });
        };

        // 重置表单
        const resetForm = () => {
            formRef.value.resetFields();
        };

        return {
            form,
            rules,
            formRef,
            submitForm,
            resetForm
        };
    }
};
</script>

<style scoped>
.el-form {
    max-width: 500px;
    margin: 0 auto;
}
</style>